<script>
import Button from '@/views/approvals/components/Button.vue'
import Son from '@/views/approvals/components/Son.vue'

export default {
  name: 'approvals',
  data() {
    return {
      value:0
    }
  },
  methods: {
    handleClick() {
      this.value++
    }
  },
  components: { Son, Button }
}
</script>

<template>
  <div class="approvals">
    <el-card>
      <template #header>
        <span>.native修饰符、$attrs属性、$listeners属性的使用</span>
      </template>
      <template #default>
        <h4>value为:{{value}}</h4>
        <!--将原生事件绑定到组件：你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时可以使用v-on的.native修饰符(.native修饰符:给子组件的根标签绑定事件)-->
        <!--二次封装的el-button组件-->
        <Button type="primary" title="我是二次封装的el-button" @click="handleClick">点击</Button>
        <!--自定义Son组件 .native修饰符:给子组件的根标签绑定事件-->
        <Son @click.native="handleClick">Son组件</Son>
      </template>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.approvals {
  .el-card {
    margin-top: 10px;
    h4{
      margin-bottom: 10px;
    }
  }
}
</style>
